<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 描述部分 -->
      <div slot="header" class="clearfix">
        <span class="des">说明：目前支持学科和关键字条件筛选</span>
        <el-button class="button-add" type="success" icon="el-icon-edit" size="mini" @click="$router.push('new')">新增试题</el-button>
      </div>
      <!-- 表单部分 -->
      <el-form :inline="true" class="demo-form-inline" label-width="70px" ref="form" :model="dataForm">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select placeholder="请选择" v-model="dataForm.subjectID">
                <el-option v-for="item in subjectList" :key="item.id" :label="item.subjectName" :value="item.subjectName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select placeholder="请选择" v-model="dataForm.catalogID">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select placeholder="请选择" v-model="dataForm.tags">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input placeholder="根据题干搜索" style="width: 221.4px" v-model="dataForm.keyWord"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select placeholder="请选择" v-model="dataForm.questionType">
                <el-option v-for="item in questionTypeList" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select placeholder="请选择" v-model="dataForm.difficulty">
                <el-option v-for="item in difficultyList" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select placeholder="请选择" v-model="dataForm.direction">
                <el-option v-for="(item, index) in directionList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select placeholder="请选择" v-model="dataForm.creatorID">
                <el-option v-for="item in inputerList" :key="item.id" :label="item.username" :value="item.username"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input placeholder="根据题干搜索" style="width: 221.4px" v-model="dataForm.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input placeholder="根据题干搜索" style="width: 221.4px" v-model="dataForm.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select placeholder="请选择" style="width: 105px; margin-right: 10px" v-model="dataForm.provinces">
                <el-option v-for="(item, index) in townList" :key="index" :label="item" :value="item" @click.native="getPname(item)"></el-option>
              </el-select>
              <el-select placeholder="请选择" style="width: 105px" v-model="dataForm.city">
                <el-option v-for="(item, index) in provincesList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-left: 123px">
            <el-form-item>
              <el-button style="margin-left: 50px" size="small" @click="handleClear">清除</el-button>
              <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 消息提示 -->
      <el-alert :title="`数据共${count}条`" type="info" show-icon style="margin-bottom: 10px">
      </el-alert>
      <!-- 表格 -->
      <el-table :data="questionList" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="180">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="80">
        </el-table-column>
        <el-table-column prop="id" label="目录" width="80"> </el-table-column>
        <el-table-column label="题型" v-slot='{row}'>
          {{questionType(row.questionType)}}
        </el-table-column>
        <el-table-column prop="question" label="题干" width="180">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" :formatter="addDateFormatter">
        </el-table-column>
        <el-table-column label="难度" v-slot='{row}'>
          {{difficultyType(row.difficulty)}}
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view" plain circle size="small" @click="showQuestionDialog(scope.row)"></el-button>
            <el-button type="success" icon="el-icon-edit" plain circle size="small" title="编辑" @click="$router.push(`new?id=${scope.row.id}`)"></el-button>
            <el-button type="danger" icon="el-icon-delete" plain circle size="small" title="删除" @click="handleDelete(scope.row.id)"></el-button>
            <el-button type="warning" icon="el-icon-check" plain circle size="small" title="加入精选" @click="addChoice(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background :current-page="dataForm.page" :page-size="dataForm.pagesize" :page-sizes="[2,3,5,10]" layout="->,prev, pager, next,sizes,jumper" :total="count" @size-change='changeSize' @current-change='changePage'>
      </el-pagination>
    </el-card>
    <el-dialog title="题目预览" :visible.sync="showQuestionDialogVisible" width="50%" :before-close="closeQuestionDialog">
      <el-row>
        <el-col :span="6">【题型】：{{ questionType(selectedQuestion.questionType) }}</el-col>
        <el-col :span="6">【编号】：{{ selectedQuestion.id }}</el-col>
        <el-col :span="6">【难度】：{{ difficultyType(selectedQuestion.difficulty) }}</el-col>
        <el-col :span="6">【标签】：{{ selectedQuestion.tags }}</el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6">【学科】：{{ selectedQuestion.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ selectedQuestion.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ selectedQuestion.direction }}</el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col :span="24">【题干】:</el-col>
      </el-row>
      <el-row>
        <div v-html="selectedQuestion.question" style="margin-top:10px"> </div>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-bottom:10px">选项（选中的选项为正确答案）：</el-col>
      </el-row>
      <el-row>
        <question-type-multioptions v-if="selectedQuestion.questionType == '2'" :question="selectedQuestion" />
        <question-type-singleoption v-if="selectedQuestion.questionType == '1'" :question="selectedQuestion" />
      </el-row>
      <hr />
      <el-row>
        <span>【参考答案】：</span>
        <el-button type="danger" size="small" @click="showVideo = true">视频答案预览</el-button>
      </el-row>
      <el-row>
        <video :src="selectedQuestion.videoURL" controls muted style="margin-top: 10px" v-if="showVideo" />
      </el-row>
      <hr />
      <el-row>
        <el-col :span="24">【答案解析】：</el-col>
      </el-row>
      <el-row>
        <div v-html="selectedQuestion.answer " style="margin-top:10px"> </div>
      </el-row>
      <hr />
      <el-row>
        <el-col :span="24">【题目备注】：{{ selectedQuestion.remarks }}</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeQuestionDialog">关闭</el-button>
      </span>
    </el-dialog>

    <div class="table-list"></div>
  </div>
</template>

<script>
import moment from 'moment'
// 查询基础题库
import {
  list as baseList,
  detail as getQuestionDetail,
  remove as baseRemove,
  choiceAdd
} from '@/api/hmmm/questions'
// 城市
import { provinces, citys } from '@/api/hmmm/citys'
// 录入者接口
import { simple } from '@/api/base/users'
// 学科列表接口
import { list as subList } from '@/api/hmmm/subjects'
// 方向列表
import { direction, difficulty, questionType } from '@/api/hmmm/constants'

// import QuestionTypeMultioptions from '../components/question-type-multioptions.vue'
// import QuestionTypeSingleoption from '../components/question-type-singleoption.vue'

export default {
  name: 'question',
  // components: {
  //   QuestionTypeMultioptions,
  //   QuestionTypeSingleoption
  // },
  data () {
    return {
      // 视频显示
      showVideo: false,
      // 题目列表
      questionList: [],
      // 数据数量
      count: 0,
      pname: '',
      // 市级城市
      townList: provinces(),
      // 省级城市
      provincesList: [],
      // 录入者列表
      inputerList: [],
      // 难度
      difficultyList: difficulty,
      // 题型列表
      questionTypeList: questionType,
      // 方向列表
      directionList: direction,
      // 学科列表
      subjectList: [],
      // 选择的题目
      selectedQuestion: {},
      // 弹窗
      showQuestionDialogVisible: false,
      dataForm: {
        page: 1, // 当前页数
        pagesize: 10, // 每页条数
        subjectID: null, // 学科
        tags: null, // 标签名称
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 二级目录
        shortName: null, // 企业简称
        remarks: null, // 题目备注
        city: null, // 城市
        provinces: null// 省份

      }
    }
  },
  watch: {
    pname (newVal, oldVal) {
      if (newVal) {
        this.dataForm.city = ''
      }
    }
  },
  methods: {
    // 每页条数变化
    changeSize (size) {
      console.log(size)
      this.dataForm.page = 1
      this.dataForm.pagesize = size
      this.getBaseList()
    },
    // 页码变化
    changePage (page) {
      console.log(page)
      this.dataForm.page = page
      this.getBaseList()
    },
    getPname (item) {
      this.pname = item
      this.provincesList = citys(this.pname)
    },
    handleQuery () {
      this.getBaseList()
    },
    // 清空表单
    handleClear () {
      this.dataForm = this.$options.data().dataForm
      // this.$refs.ref.resetFields()
    },
    /* questionTypeFormatter (row, column, cellValue, index) {
      for (const item of this.questionTypeList) {
        if (item.value === +cellValue) {
          return item.label
        }
      }
      return '-'
    },
    difficultyFormatter (row, column, cellValue, index) {
      for (const item of this.difficultyList) {
        if (item.value === +cellValue) {
          return item.label
        }
      }
      return '-'
    }, */
    // 枚举-----题型由id转数字；难度由id转数字
    questionType (id) {
      const TYPES = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return TYPES[id]
    },
    difficultyType (id) {
      const TYPES = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return TYPES[id]
    },
    addDateFormatter (row, column, cellValue, index) {
      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 开启弹窗
    async showQuestionDialog (row) {
      const resp = await getQuestionDetail({ id: row.id })
      const qs = resp.data
      console.log(qs)
      this.selectedQuestion = qs
      this.showQuestionDialogVisible = true
    },
    closeQuestionDialog () {
      // 关闭弹窗
      this.showQuestionDialogVisible = false
      // 隐藏视频
      this.showVideo = false
    },
    // 删除题目
    handleDelete (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const resp = await baseRemove({ id })
          if (resp.status === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 重新获取列表
            this.getBaseList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 获取题目列表
    async getBaseList () {
      const resp = await baseList({ ...this.dataForm })
      if (resp.status === 200) {
        this.count = resp.data.counts
        this.questionList = resp.data.items
      }
    },
    // 加入精选
    addChoice (id) {
      this.$confirm('是否确定将题目加入精选题库', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const resp = await choiceAdd({ id, choiceState: 1 })
          if (resp.status === 200) {
            this.$message({
              type: 'success',
              message: '加入成功!'
            })
            // 从基础题库删除
            baseRemove({ id })
            // 重新获取列表
            this.getBaseList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  },
  async created () {
    // 获取学科列表
    const subResp = await subList()
    this.subjectList = subResp.data.items
    // 获取录入者
    const getInputer = await simple()
    this.inputerList = getInputer.data

    // 获取数据列表
    this.getBaseList()
  }
}
</script>

<style scoped lang='scss'>
// .container {
//   ::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
//     color: #000;
//   }
// }
.box-card {
  margin: 10px;
  .clearfix {
    .des {
      font-size: 12px;
      color: pink;
      float: left;
    }
    .button-add {
      float: right;
    }
  }
}
</style>
